<template>
  <div class="all">
    <van-sticky :offset-top="0">
      <div class="background">
        <header class="header">
          <div @click="back()" style="display: flex;align-items: center;color: #1da4f2;">
            <img src="../../assets/返回.png"  alt="">
          <span>返回</span>
          </div>
        </header>
        <div class="muneList">
          <van-dropdown-menu class="menu" active-color="#1989fa">
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
          <van-search
            class="searchInput"
            v-model="inputVal"
            show-action
            :placeholder="placeholder"
            left-icon=""
            right-icon=""
            shape="round"
            autofocus
            @focus="searchFocus()"
            @blur="noFocus()"
          >
            <template #left-icon>
              <van-icon @click="onSearch" name="search" />
<!--              <img v-show="searchShow === true" src="../../assets/搜索小@2x.png" alt="" class="search_left">-->
            </template>
            <template #action>
              <div @click="onSearch" class="sousuo">搜索</div>
            </template>
          </van-search>
        </div>
      </div>
    </van-sticky>
    <div class="content">
      <div class="boxList" v-for="(item, index) in peopleList" :key="index"
           @click="selectBox($event, item.USER_ID, index)">
        <div class="div_left" :class="{ 'nan' : item.sex === 1 , 'nv' : item.sex === 2 }">
          <img v-show="item.sex===1" src="../../assets/男医生@2x.png" alt="">
          <img v-show="item.sex===2" src="../../assets/女医生@2x.png" alt="">
        </div>
        <div class="div_right">
          <ul>
            <li>
              <div class="txtLeft">医生ID:</div>
              <div class="txtRight idText">{{item.USER_ID}}</div>
<!--              <div class="new">新</div>-->
            </li>
            <li>
              <div class="txtLeft">医生姓名:</div>
              <div class="txtRight">{{item.NICK_NAME}}</div>
            </li>
            <li>
              <div class="txtLeft">联系电话:</div>
              <div class="txtRight">{{item.PHONE}}</div>
            </li>
            <li>
              <div class="txtLeft">机构:</div>
              <div class="txtRight address">{{item.HOSPITAL_NAME}}</div>
            </li>
            <li>
              <div class="txtLeft">擅长:</div>
              <div class="txtRight goodText">{{item.Goodat}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom"><button @click="queDing()">确定</button></div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
// import axios from 'axios'
export default {
  name: 'AddDoctor',
  data () {
    return {
      placeholder: '搜索',
      sex: 1,
      searchShow: false,
      inputVal: '', // 搜索框值
      value1: 1, // 选择菜单选中的值
      option1: [
        { text: '医生姓名', value: 1 },
        { text: '联系电话', value: 2 },
        { text: '身份证号', value: 5 },
        { text: '机构', value: 3 },
        { text: '擅长', value: 4 }
      ],
      titleList: ['医生ID', '医生姓名', '联系电话', '机构', '擅长'],
      peopleList: [],
      from_user_id: '',
      idList: []
    }
  },
  mounted () {
    // 截取网址后的userid
    this.from_user_id = this.$utils.getUrlKey('userid')
    // 输入框自动获取焦点
    console.log($('.van-search input').focus())
    $('.content').css({'height': $('.bottom').offset().top - $('.content').offset().top + 'px', 'overflow': 'scroll'})
  },
  methods: {
    // 点击确定按钮
    queDing () {
      var ids = this.idList.toString()
      // axios.get('http://jmx-kfdj.com/kfhl/minifriend/saveFriend',
      //   {params: {'from_user_id': this.from_user_id, 'ids': ids}})
      this.$http.saveFriend({'from_user_id': this.from_user_id, 'ids': ids})
        // from_user_id：用户登录的id
        // ids：  多选的to_user_id 按照逗号分割
        .then(res => {
          console.log(res)
          Toast('已成功发送签约申请')
          this.$router.history.go(-1)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击选择的人
    selectBox (e, id, index) {
      // 当被选中时id 为 select
      if (e.currentTarget.id === 'select') {
        $('.boxList').eq(index).attr('id', '')
        this.idList[index] = ''
      } else {
        $('.boxList').eq(index).attr('id', 'select')
        this.idList[index] = id
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 搜索事件
    onSearch () {
      this.getAddDoctor(this.from_user_id, this.inputVal, this.value1)
    },
    // 输入框获取焦点
    searchFocus () {
      if (this.inputVal.length > 0) {
        this.searchShow = true
        this.placeholder = ''
      } else {
        this.searchShow = false
        this.placeholder = '搜索'
      }
    },
    // 没有焦点
    noFocus () {
      if (this.inputVal.length > 0) {
        this.searchShow = true
        this.placeholder = ''
      } else {
        this.searchShow = false
        this.placeholder = '搜索'
      }
    },
    // 获取未添加的医生信息
    getAddDoctor (from, name, type) {
      // axios.get('http://jmx-kfdj.com/kfhl/minifriend/findFeiMyStaff',
      //   {params: {'from_user_id': from, 'name': name, 'type': type}})
      this.$http.findFeiMyStaff({'from_user_id': from, 'name': name, 'type': type})
        // from_user_id：用户登陆id
        // name：搜索框内数据
        // type：选择框1 2 3 4 5
        .then(res => {
          console.log(res)
          this.peopleList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  .background{
    background: white;
  }
  .sousuo{
    color: #1DA4F2;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
  }
  .all{
    width: 100vw;
    height: 100vh;
    background: #FAF9FE;
    overflow: scroll;
  }
  .header{
    width: 100vw;
    height: 12vw;
    background: white;
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: bold;
    /*justify-content: space-between;*/
  }
  .header img {
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }
  .header span{
    font-size: 15px;
  }
  /deep/ .van-dropdown-menu__item{
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
  }
  .muneList {
    display: flex;
    width: 100%;
  }
  /deep/ .menu .van-dropdown-menu__bar{
    box-shadow: none;
  }
  /deep/ .menu {
    width: 30vw;
  }
  .searchInput{
    width: 70vw;
    box-sizing: border-box;
  }
  /deep/ .muneList .van-field__control[type=search]{
    padding-left: 10px;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 15px;
  }
  /deep/ .van-ellipsis {
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .muneList .van-field__control[type=search]::placeholder{
  /*  text-align: center;
    content: '';
    background: url("../../assets/搜索小@2x.png") no-repeat;
    background-size: 4vw 4vw;
    background-position: 35%;*/
  }
  /deep/ .van-icon-search::before {
    content: '\F0AF';
    padding-left: 10px;
  }
  /deep/ .muneList .van-search__action{
    margin: 0 4vw 0 2vw;
  }
  .boxList:last-child{
    margin-bottom: 2vw;
  }
  .boxList{
    width: 92vw;
    height: 48vw;
    background: #ffffff;
    border-radius: 20px;
    margin: 2vw auto auto auto;
    overflow: hidden;
    display: flex;
    /*overflow: scroll;*/
  }
  .search_left{
    width: 4vw;
    height: 4vw;
    padding-left: 10px;
    margin-top: 1vw;
  }
  .div_left{
    width: 18vw;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div_left img{
    width: 15vw;
    height: 15vw;
  }
  .div_right{
    width: 74vw;
    height: 100%;
  }
  .div_right ul{
    height: 100%;
    /*padding: 10px;*/
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .div_right ul li{
    width: 100%;
    display: flex;
    /*align-items: center;*/
    /*margin: 5px 0;*/
  }
  .div_right ul li:first-child{
    margin-top: 3vw;
  }
  .div_right ul li:last-child{
    margin-bottom: 3vw;
  }
  .div_right ul li .txtLeft{
    width: 35%;
    line-height: 30px;
  }
  .div_right ul li .txtRight{
    width: 65%;
    line-height: 30px;
    word-wrap: break-word;
  }
  .address {
    width: 30vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .idText{
    width: 27vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .goodText{
    width: 36vw !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .new{
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    color: #E3170D;
    background: rgba(227, 23, 13, 0.1);
    border-radius: 4px;
    margin-left: 8vw;
  }
  .nv {
    background: rgba(255, 227, 247, 1);
  }
  .nan {
    background: rgba(205, 239, 255, 1);
  }
  .bottom{
    width: 100%;
    height: 15vw;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom button{
    width: 92vw;
    height: 12vw;
    background: #1DA4F2;
    border-radius: 22px;
    color: #fff;
    border: none;
  }
  #select{
    /*background: rgba(29, 164, 242, 0.2) !important;*/
    background: rgba(29, 164, 242, 0.7) !important;
    opacity: 0.5;
  }
</style>
